<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画</title>
		<style>
			div img{
				width: 1200px;
			}
		</style>
		<script src="../js/jquery-3.6.3.min.js"></script>
		<script>
			$(function(){
				$("#b1").click(function(){
					if($("#pic").is(":hidden")){
						$("#pic").show(3000);
						$("#b1").text("隐藏")
						return;
					}
					$("#pic").hide(2000,function(){
						$("#b1").text("显示")
					});
				});
				$("#b2").click(function(){
					if($("#pic").is(":hidden")){
						$("#pic").fadeIn(3000);
						$("#b2").text("隐藏")
						return;
					}
					$("#pic").fadeOut(2000,function(){
						$("#b2").text("显示")
					});
				});
				$("#b3").click(function(){
					if($("#pic").is(":hidden")){
						$("#pic").slideDown(3000);
						$("#b3").text("隐藏")
						return;
					}
					$("#pic").slideUp(2000,function(){
						$("#b3").text("显示")
					});
				});
			});
		</script>
	</head>
	<body>
		<div id="pic">
			<img src="../bdqn/2.jpg"/>
		</div>
		<p>
			<button id="b1">隐藏</button>
			<button id="b2">隐藏</button>
			
			<button id="b3">隐藏</button>
		</p>
	</body>
</html>